<template>
  <div>
    <el-dialog v-bind="$attrs" v-on="$listeners" @open="onOpen" @close="onClose" title="问题详情" :visible.sync="visible">
      <el-form ref="问题上报详情" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-form-item label="处理单号" prop="field101">
          <el-input v-model="formData.field101" placeholder="请输入处理单号" readonly :disabled='false' clearable
                    :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="项目名称" prop="field105">
          <el-input v-model="formData.field105" placeholder="请输入项目名称" readonly :disabled='false' clearable
                    :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="上报时间" prop="field103">
          <el-date-picker v-model="formData.field103" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                          :style="{width: '100%'}" placeholder="请选择上报时间" readonly clearable :disabled='false'></el-date-picker>
        </el-form-item>
        <el-form-item label="问题描述" prop="field106">
          <el-input v-model="formData.field106" type="textarea" placeholder="请输入问题描述" readonly
                    :disabled='false' :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item prop="planName" label="审核状态">
          <div style="width: 300px;">
            <el-steps :active="1" align-center finish-status="success">
              <el-step title="组长" description="已上报"></el-step>
              <el-step title="部长" description="审批中"></el-step>
              <el-step title="分管领导" description=""></el-step>
              <el-step title="问题解决" description=""></el-step>
            </el-steps>
          </div>
        </el-form-item>
      </el-form>
<!--      <div slot="footer">-->
<!--        <el-button @click="close">取消</el-button>-->
<!--        <el-button type="primary" @click="handelConfirm">确定</el-button>-->
<!--      </div>-->
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: 'problemDetail',
    inheritAttrs: false,
    components: {},
    props: [],
    data() {
      return {
        visible:false,
        formData: {
          field101: '0001201911025861',
          field105: 'xxxx项目',
          field103: '2020-04-03',
          field106: 'xxxxxxxxx',
        },
        rules: {
          field101: [{
            required: true,
            message: '请输入处理单号',
            trigger: 'blur'
          }],
          field105: [{
            required: true,
            message: '请输入项目名称',
            trigger: 'blur'
          }],
          field103: [{
            required: true,
            message: '请选择上报时间',
            trigger: 'change'
          }],
          field106: [{
            required: true,
            message: '请输入问题描述',
            trigger: 'blur'
          }],
        },
      }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {
      this.visible = true
    },
    methods: {
      onOpen() {},
      onClose() {
        this.$refs['问题上报详情'].resetFields()
      },
      close() {
        this.$emit('update:visible', false)
      },
      handelConfirm() {
        this.$refs['问题上报详情'].validate(valid => {
          if (!valid) return
          this.close()
        })
      },
    }
  }

</script>
<style>
</style>
